<template>
  <div class="hello">
    <!-- <p>{{ $store.state.msg }}</p>
    <p>{{ $store.state.list }}</p> -->
    <p>{{ msg }}</p>
    <p>{{ list }}</p>

    <p>{{ reverseMsg }}</p>
    <hr>

    <button @click="modify">修改msg</button>
    <button @click="setMsg('欢迎')">修改msg</button>
    <hr>

    <button @click="update">异步修改msg</button>
    <button @click="loadUser('zhangsan')">异步修改msg</button>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
// console.log(mapState(['msg','list'])) // 返回一个对象，对象中为每个状态数据封装了一个函数
// console.log(mapMutations(['setMsg']))

export default {
  mounted(){
    // console.log(this.$store)
  },
  // 方式1：通过存储对象$store访问
  // computed:{
  //   msg(){
  //     return this.$store.state.msg
  //   },
  //   list(){
  //     return this.$store.state.list
  //   },
  // }
  // 方式2：通过辅助函数访问
  // computed:mapState(['msg','list'])
  computed:{
    info(){
      return 'hello'
    },
    ...mapState(['msg','list']), // 使用...对象展开运算符，将它与局部计算属性混合使用
    ...mapGetters(['reverseMsg'])
  },
  methods:{
    modify(){
      // console.log(this.$store)
      this.$store.commit('setMsg','欢迎') // 调用commit()提交突变
    },
    ...mapMutations(['setMsg']), // 映射为this.setMsg()
    update(){
      this.$store.dispatch('loadUser','tangyang8942')
    },
    ...mapActions(['loadUser']) // 映射为this.loadUser()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
